<!--  -->
<template>
  <div class="body">
      <div class="box">

        <el-form
    ref="ruleFormRef"
    :model="adminData"
    :rules="rules"
    label-width="auto"
    class="ruleForm"
  >
    <el-form-item label="" prop="username">
      <el-input v-model="adminData.username"  placeholder="请输入账号"  />
    </el-form-item>
    <el-form-item label="" prop="pass">
        <el-input type="password" show-password v-model="adminData.pwd"  placeholder="请输入密码"  />
    </el-form-item>
 
    <el-form-item>
      <el-button type="primary" @click="submit(ruleFormRef)">登录</el-button>
    </el-form-item>
  </el-form>
      </div>
  </div>
</template>
<script lang='ts' setup>

import {IAdmin} from '../services/administator/type'
import { reactive,ref} from 'vue'
import type {FormInstance, FormRules } from 'element-plus'

import {useAuthStore} from '../store/auth'
 
 const authStore=useAuthStore();

const adminData=reactive<IAdmin>({
    username:"",
    pwd:""
})
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<IAdmin>>({
    username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  
})
 

const submit=async (formEl: FormInstance | undefined)=>{

    if (!formEl) return;
    const valid=await formEl.validate().catch(()=>{});
    if(valid){

      
      authStore.login(adminData);
      console.log("提交登录");
       

         
    }

  
    

 
   
   
}
 
</script>
<style scoped lang="less">
@import '../assets/css/login';

</style>